<template>
  <!--邮箱注册绑定手机-->
    <el-form :model="from" :rules="rules" ref="from">
      <el-form-item :class="['relative']" prop="phone">
          <el-input class="full-width" placeholder="请输入手机号" v-model="from.phone">
              <template slot="prepend"><i class="iconfont">&#xe605;</i></template>
          </el-input>
      </el-form-item>
      <el-form-item :class="['relative']" prop="imgCode">
          <el-row>
              <el-col :span="14">
                  <el-input placeholder="请输入图片验证码" v-model="from.imgCode" :maxlength="4">
                      <template slot="prepend"><i class="iconfont">&#xe676;</i></template>
                  </el-input>
              </el-col>
              <el-col :span="10" class="rdm-code">
                  <img-code :codetype="4" v-model="from.codeKey" :key="from.key"></img-code>
              </el-col>
          </el-row>
      </el-form-item>
      <el-form-item :class="['relative']" prop="verifyCode">
          <el-row>
              <el-col :span="14">
                  <el-input placeholder="请输入验证码" v-model="from.verifyCode" :maxlength="6">
                      <template slot="prepend"><i class="iconfont">&#xe600;</i></template>
                  </el-input>
              </el-col>
              <el-col :span="10" class="rdm-code">
                  <SendVerifyCode ref="sendcode" :username="from.phone" :type="2" @disabled="sent=true" @enabled="sent=false"></SendVerifyCode>
              </el-col>
          </el-row>
      </el-form-item>
      <p v-show="sent" class="tips relative">验证码已发送，15分钟内输入有效。<i class="icon icon-warn ab" style="right:83px;"></i></p>
      <el-button class="full-width next-step" type="primary" size="large" @click="boundPhone('from')" :loading="loading">绑定手机</el-button>
      <p class="jump_btn"><el-button type="text" @click="nixtSetp">跳过</el-button></p>
    </el-form>
</template>

<script>
  import indexApi from 'api'
  import validator from 'utils/validator'
  import ImgCode from '../../components/ImgCode'
  import SendVerifyCode from '../../components/SendVerifyCode'
  export default {
    components: {
      ImgCode,
      SendVerifyCode
    },
    computed: {
      isPhone () {
        return validator.pattern.mobile.test(this.from.phone)
      }
    },
    data () {
      return {
        loading: false,
        hover: false,
        rules: {
          phone: [
            {required: true, message: '手机号不能为空'},
            {
              validator: (rule, value, callback) => {
                if (!this.isPhone && this.from.phone) {
                  callback(new Error('请输入正确的手机号'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          imgCode: [
            {required: true, message: '请输入图片验证码'}
          ],
          verifyCode: [
            {required: true, message: '请输入验证码'}
          ]
        },
        sent: false,
        agree: false,
        from: {
          phone: '',
          imgCode: '',
          codeKey: '',
          verifyCode: '',
          key: ''
        }
      }
    },
    methods: {
      boundPhone (formName) {
        let userName = this.$route.query.userName
        this.$refs[formName].validate((valid) => {
          if (valid) {
            indexApi.bindPhone({
              account: userName,
              phone: this.from.phone,
              smsCode: this.from.verifyCode,
              validateCode: this.from.imgCode,
              randomKey: this.from.codeKey
            }, {
              context: this
            }).then((res) => {
              this.$router.push({path: '/signup/result', query: {userName: userName, success: true}})
            }).then((ERR) => {
              if (ERR.result === '2') {
                this.from.key = Math.random()
              }
            })
          } else {
            return false
          }
        })
      },
      nixtSetp () {
        this.$router.push({path: '/signup/result', query: {userName: this.$route.query.userName, success: true}})
      }
    }
  }
</script>

<style scoped lang="scss">
</style>
